<style scoped>

.inline{
    display: flex;
    align-items: center;
}

.menu{
    margin: auto;
}
.menu-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header-tools{
    flex: 1 1;
    display: flex;
    align-items: center;
}

.menu-header-sub{
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 10%;
}

.header-tools-item{
    min-width: 130px;
}

.header-tools-item + .header-tools-item {
    margin-left: 13px;
}


.menu-table{
    margin: 20px auto ;
}

.page{
    margin-top: 20px
}


</style>
<template>
    <div class="menu">
        <div class="menu-header">
            <div class="menu-header-tools">
                 <div class="header-tools-item">
                     <LSelect 
                     valueKey='id'
                     labelKey='title'
                     :options='carTeamList'
                     v-model="param.fleet_id"
                     placeholder="车队"
                     clearable  >
                     </LSelect>
                </div>
                 <div class="header-tools-item">
                     <LSelect 
                     valueKey='id'
                     labelKey='title'
                     :options='driverList'
                     v-model="param.nickname"
                     placeholder="司机"
                     clearable>
                     </LSelect>
                </div>
                <div class="header-tools-item">
                    <LockDatePicker
                        :startTime.sync='param.start_time'
                        :endTime.sync='param.end_time'
                        type="daterange"
                        size="default"
                        format="yyyy-MM-dd"
                        placement="bottom-end"
                        placeholder="选择日期"
                    ></LockDatePicker>
                </div>
                <div class="header-tools-item inline search">
                  <Button type="primary" class="search" icon="ios-search" @click="onSearch">搜索</Button>
                </div>
            </div>
            <div class="menu-header-sub">
                <Button
                v-if="filterCheck('/export')"
                type="error"
                @click="onExport"
                >导出</Button>
            </div>
        </div>

        <div class="menu-table">

            <Table
                ref="myTable"
                border
                :columns="tableConf"
                :data="tableData"
            >
            <template slot-scope="{ row }" slot="operating_pic">
                <TableImg :urls='row.operating_pic' />
            </template>
          </Table>
          <page
            class="page"
            ref="page"
            :total="total"
            :currentPage="param.page"
            :switchPageIndex="switchPageIndex"
            :switchPageSize="switchPageSize"
          ></page>
            
        </div>

        
    </div>
</template>
<script>
import Select from '@/components/select'
import LockDatePicker from '@/components/time'
import {tableConf, tableBtnConf} from './model'
import { asyncFormat } from '@/utils'
import * as API from '../api'
import TableImg from '../components/table-img'

// 模拟filter
const filter = () => true



export default {

    components:{ 
        LSelect: Select,
        LockDatePicker,
        TableImg
    },  
    
    props:{
        orderList: {
            default(){return[]}
        },
        companyList: {
            default(){return[]}
        },
        carTeamList: {
            default(){return[]}
        },
    },

    data(){
        return{
            tableConf,
            tableBtnConf,
            showModel: false,
            tableData: [],
            total: 0,
            switchPageIndex: 1,
            switchPageSize: 10,
            param: {
                fleet_id: 0,
                nickname: '',
                page: 1,
                pageSize: 10,
            },

            driverList: [],
            
            // 模拟
            routerList: [],
            routerName: '/'   
        }
    },

    watch:{

        'param.fleet_id': async function (val, oldVal){
            if(val === oldVal){return}
            
            this.param.nickname = ''

            const query = {
                page: 1,
                pagesize: 999,
                fleet_id: val
            }
            const [res, err] = await asyncFormat(API.getDriverList(query))
            
            if(err){ console.error(err); return }
            this.driverList = res
        }
        
    },
    
    computed: {

        callbackConf(){

            const { onDetail, onEdit, onPlane, onCancel } = this
            const wrap = fn => row => fn(row) 
            
            return{
                detail: wrap(onDetail),
                edit: wrap(onEdit),
                plane: wrap(onPlane),
                cancel: wrap(onCancel),
            }
        },
        
        tableBtnVisibal(){
            
            const { filterCheck } = this
            return{
                detail: () => true,
                edit: () => filterCheck('edit'),
                plane: row => filterCheck('assign')&&[0, 120].includes(row.status),
                cancel: row => filterCheck('cancel')&&![122, 666, 133].includes(row.status),
            }
        }
        
    },
    methods: {

        filterCheck(path){
            return filter(this.routerList, `${this.routerName}/${path}`)
        },
        
        onAddhandler(){

        },
        onSearch(){
            console.log(this.param)
            this.loadTableData()
        },
        onExport(){
            this.showModel = true
        },



        onDetail(){

        },
        onEdit(){

        },
        onPlane(){

        },
        onCancel(){

        },  

        async loadTableData(){
            const { page, pageSize } = this.param
            const [res, err] = await asyncFormat(API.getFangKongList(this.param))
            if(err){console.error(err); return}

            this.tableData = res.map(item => {
                console.log()
                return {
                    ...item,
                    _index: (page - 1)*pageSize + item.index + 1
                }
            })
        }
        
    },

    created() {
        this.loadTableData()
        
    },
}
</script>

